<template>
	<view class="login">
		<image :src="comm_img_url+'/pro/account-bg-top.png'" class="bg-top"></image>
		<!-- #ifdef MP-WEIXIN -->
		<view class="icon-back" @tap="back" :style="'top:'+nav_height+'px'">
			<u-icon name="arrow-left" color="#fff" size="20"></u-icon>
		</view>
		<!-- #endif -->
		<view class="app-login">
			<view class="login-title">
				绑定手机号
			</view>
			<view class="tips">
				为了账户安全，请绑定你的手机号
			</view>
			<view class="tips-line"></view>
			<view class="mode flex-box">
				<input type="number" v-model="input.tel" class="box-1" maxlength="11" placeholder="请输入手机号" />
			</view>
			<view class="mode flex-box">
				<input type="text" v-model="input.auth_code" class="box-1" maxlength="6" placeholder="输入验证码" />
				<!-- <u-verification-code :seconds="60" ref="uCode" @change="codeChange"></u-verification-code> -->
				<u-code :seconds="seconds" @end="end" @start="start" ref="uCode" @change="codeChange"></u-code>
				<text class="getcode" @tap="getAuthCode">{{code_text}}</text>
			</view>
			<view class="mode flex-box" v-if="is_reg">
				<input type="text" v-model="refer_code" class="box-1" placeholder="请输入邀请码" />
				<!-- <u-icon name="scan" size="42" @tap="doScan"></u-icon> -->
			</view>
			<button hover-class="none" class="btn" :disabled="is_loading" :loading="is_loading" @tap="bindTel">确定绑定</button>
		<!-- 	<view class="flex-box btn-nav">
				<text @tap="jumpReg()">没有账号？立即注册></text>
			</view> -->
		</view>
		<image :src="comm_img_url+'/pro/account-bg-bottom.png'" class="bg-bottom"></image>
	</view>
</template>

<script>
	// import app from "@/common/js/comm_url.js";
	import {
		mapMutations
	} from 'vuex'
	export default {
		data() {
			return {
				is_reg:false,
				refer_code:'',
				comm_img_url: null,
				input: {
					tel: '',
					auth_code: '',
					refer_code:''
				},
				code_text: '获取验证码',
				is_loading: false,
				info: {},
				nav_height:'25',
				seconds: 60,
			};
		},
		onLoad(option) {
			this.comm_img_url = this.$c.appImg
			console.log(option,'option参数 bind_tel')
			let newcode = uni.getStorageSync("newcode");
			if(newcode){
				this.is_reg = true
				this.refer_code = uni.getStorageSync("code");
			}
			this.refer_code = uni.getStorageSync("code");
			if (option.item) {
				//#ifdef APP-PLUS
				this.info = JSON.parse(decodeURIComponent(option.item))
				//#endif
				//#ifdef MP-WEIXIN
				this.info.unionid = JSON.parse(decodeURIComponent(option.item))
				uni.getSystemInfo({
					success:res=>{
						// console.log('状态栏高度',res.statusBarHeight);
						this.nav_height = res.statusBarHeight
					}
				})
				//#endif
			}
		},
		methods: {
			...mapMutations(['login']),
			back(){
				uni.navigateBack()
			},
			codeChange(text) {
				this.code_text = text;
			},
			getURLParam(url) {
				var querys = url.substring(url.indexOf('?') + 1).split('&');
				console.log(querys,'querys')
					var result=[];
					for(var i=0;i<querys.length;i++){
						var temp=querys[i].split('=');
						if(temp.length<2){
							result[temp[0]]='';
						}else{
							console.log(temp[0],temp[1],99999)
							result[0]=temp[1];
						}
					}
					console.log(result,'result')
					return result
			},
			doScan() {
				uni.scanCode({
					success: res => {
						var url = res.path;
						let scene = this.getURLParam(url)
						console.log(res,scene,'信息222')
						// var reg = new RegExp("/\?code=([^&]*)(&|$)", "i");
						// var r = url.match(reg);
						console.log(scene,'信息')
						if(scene){
							this.refer_code = scene;
						}else{
							uni.showToast({
								title: '无法识别推荐码',
								icon: 'none'
							})
						}
						// var url = res.result;
						// var reg = new RegExp("/\?code=([^&]*)(&|$)", "i");
						// var r = url.match(reg);
						// if (r != null) {
						// 	this.refer_code = r[1];
						// } else {
						// 	uni.showToast({
						// 		title: '无法识别推荐码',
						// 		icon: 'none'
						// 	})
						// }
					}
				});
			},
			getAuthCode() {
				if (!this.input.tel) {
					uni.showToast({
						icon: 'none',
						title: '请输入手机号'
					})
					return
				}
				if (this.$refs.uCode.canGetCode) {
					// 模拟向后端请求验证码
					this.$u.api.smsBind({
							tel: this.input.tel
						})
						.then(res => {
							if (res.status) {
								this.$refs.uCode.start();
								return
							} else if (res.code == -10) {
								this.$refs.uCode.start();
								this.is_reg = true
								// uni.showToast({
								// 	icon: 'none',
								// 	title: '您还未注册!',
								// 	mask: true
								// })
								// setTimeout(() => {
								// 	this.jumpReg()
								// }, 1500)
							} else {
								uni.showToast({
									icon: 'none',
									title: res.msg
								})
							}
						})
						.catch(err => {
							console.log(err);

						})
				}
			},
			jumpReg() {
				uni.redirectTo({
					url: '/pages/login/reg?item=' + encodeURIComponent(JSON.stringify(this.info))
				})
			},
			bindTel() {
				if (!this.input.tel) {
					uni.showToast({
						icon: 'none',
						title: '请输入手机号码'
					})
					return false
				}
				if (!this.$u.test.mobile(this.input.tel)) {
					uni.showToast({
						icon: 'none',
						title: '您输入的手机号码有误'
					})
					return false
				}
				if (!this.refer_code&&this.is_reg) {
					uni.showToast({
						icon: 'none',
						title: '请输入邀请码'
					})
					return false
				}
				this.is_loading = true
				this.input.refer_code = this.refer_code
				var param = Object.assign(this.info, this.input)
				console.log(param);
				this.$u.api.bindWX(param).then(res => {
						this.is_loading = false
						if (res.status) {
							uni.setStorageSync('token', res.msg.token);
							uni.setStorageSync('userInfo', res.msg.userinfo);
							this.login();
							uni.switchTab({
								url: "/pages/my/my"
							});
						} else {
							uni.showToast({
								icon: 'none',
								title: res.msg
							})
						}

					})
					.catch(err => {
						this.is_loading = false
						console.log(err)
						uni.showToast({
							icon: 'none',
							title: "网络异常，请稍后再试"
						})
					})

			}
		}
	}
</script>

<style lang="less">
	
	.btn {
		// width: 600rpx;
		height: 90rpx;
		line-height: 90rpx;
		background-image: linear-gradient(to right,#e9d2fa,#be8ff0);
		color: #fff;
		border-radius: 50rpx;
		font-size: 32rpx;
		display: flex;
		justify-content: center;
		align-items: center;
		
		margin:30rpx auto;
	}
	// @import url('@/common/css/comm.less');
	.icon-back{
		width: 70rpx;
		height: 70rpx;
		position: absolute;
		// top: var(--status-bar-height);
		left:20rpx;
		z-index: 2;
		text-align: center;
		line-height: 75rpx;
		padding-right: 5rpx;
		// margin-top:20rpx;
		border-radius: 50%;
		background: rgba(0,0,0,0.5);
		padding-top:15rpx;
		padding-left:10rpx;
	}

	page {
		// .bg(#fff);
	}

	.tips-line {
		width: 130rpx;
		height: 8rpx;
		margin: 0 auto 30rpx;
		

	}

	.login {
		position: relative;
		z-index: 1;
		min-height: 100vh;
	}

	.bg-top {
		position: absolute;
		top: 0;
		right: 0;
		width: 396rpx;
		height: 432rpx;
		z-index: -1;
	}

	.bg-bottom {
		position: absolute;
		left: 0;
		bottom: 0;
		width: 304rpx;
		height: 370rpx;
		z-index: -1;
	}

	.app-login {
		position: absolute;
		top: 40%;
		left: 50%;
		width: 600rpx;
		transform: translate(-50%, -40%);
		padding: 30rpx;

		// button {
		// 	width: 100%;
		// 	margin: 50rpx auto 0;
		// 	background:linear-gradient(270deg,#4bb596 0%,  #70c8ae 63%, #94dbc6 100%);
		// }

		.mode {
			padding: 30rpx 0;
			border-bottom: 1px solid #EEEEEE;

			.getcode {
				min-width: 160rpx;
				text-align: center;
				border-left: 1px solid #EEEEEE;
				padding-left: 20rpx;
				
			}
		}

		.login-title {
			font-size:52rpx;
			font-weight: bold;
			text-align: center;
		}

		.tips {
			color:#999;
			font-size:24rpx;
			padding: 10rpx;
			text-align: center;
		}
	}

	.btn-nav {
		justify-content: center;
		padding-top: 50rpx;
		
	}
</style>
